import { defineStore } from 'pinia';
// 不用模块写需要引入 
import { todoType, todoListType } from '../types/todo.d'
import { useLocalStorage } from '../hooks/useLocalStorage';
let useTodoStore = defineStore('todomvc', {
    state: () => {
        return {
            // todoList: [
            //     {
            //         id: "01",
            //         text: "学习vue3",
            //         done: true,
            //         isEdit: false
            //     },
            //     {
            //         id: "02",
            //         text: "学习ts",
            //         done: false,
            //         isEdit: false
            //     },
            // ],
            todoList: useLocalStorage('todomvc') || [],
            visibility: localStorage.getItem('visibility') || 'all'
        }
    },
    actions: {
        // 删除 
        deleteTodo(id: String) {
            let index = this.todoList.findIndex((item: any) => item.id == id);
            this.todoList.splice(index, 1)
        },
        // 修改单个按钮的状态
        changeStatus(id: String, val: any) {
            let index = this.todoList.findIndex((item: any) => item.id == id);
            this.todoList[index].done = val.target.checked
        },
        //修改所有按钮的状态
        changeAllDone(val: any) {
            this.todoList.forEach((item: any) => item.done = val.target.checked)
        },
        // 编辑
        editTodo(id: string) {
            let index = this.todoList.findIndex((item: any) => item.id == id);
            this.todoList[index].isEdit = true;
        },
        // 编辑内容
        changeText(id: string, val: any) {
            let index = this.todoList.findIndex((item: any) => item.id == id);
            this.todoList[index].text = val.target.value;
            this.todoList[index].isEdit = false;
        },
        // 添加
        addTodo(val: any) {
            this.todoList.push({
                id: String(Date.now()),
                text: val.target.value,
                done: false,
                isEdit: false
            })
        },
        // 修改visibility
        changeVisibility(val: string) {
            this.visibility = val
        },
        //清除已完成
        clearCompleted() {
            let unCompletedList = this.todoList.filter((item: any) => !item.done);
            this.todoList.length = 0;
            this.todoList.push(...unCompletedList)
        }
    },
    getters: {
        // 最上面按钮的状态 
        AllDone(): Boolean {
            return this.todoList.every((item: any) => item.done)
        },
        // 未完成的数量
        unCompleted(): number {
            return this.todoList.filter((item: any) => !item.done).length
        },
        //根据visibility计算出渲染的数据
        visibilityData(): todoListType {
            if (this.visibility == 'all') {
                return this.todoList;
            } else if (this.visibility == 'active') {
                return this.todoList.filter((item: todoType) => !item.done)
            } else {
                return this.todoList.filter((item: todoType) => item.done)
            }
        }
    }
})
export default useTodoStore; 